<template>
    <el-dropdown trigger="click" @command="handleLanguageChange">
        <div>
            <svg-icon icon-class="language" :size="size" />
        </div>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item
                    v-for="item in langOptions"
                    :key="item.value"
                    :disabled="appStore.language === item.value"
                    :command="item.value"
                >
                    {{ item.label }}
                </el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { useAppStore } from '@/store/modules/app'
import { LanguageEnum } from '@/enums/LanguageEnum'

defineProps({
    size: {
        type: String,
        required: false
    }
})

const langOptions = [
    { label: '中文', value: LanguageEnum.ZH_CN },
    { label: 'English', value: LanguageEnum.EN }
]

const appStore = useAppStore()
const { locale, t } = useI18n()

function handleLanguageChange(lang: string) {
    locale.value = lang
    appStore.changeLanguage(lang)

    ElMessage.success(t('langSelect.message.success'))
}
</script>
